<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美的官网(Midea) -美的集团官方商城网站，直营空调、冰箱、洗衣机、压力锅、电烤箱、面包机等电器。</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入基础样式表 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入index.html -->
    <link rel="stylesheet" href="./css/index.css">
    
</head>
<body>
    <!-- 创建头部 -->
    <div class="header">
        <!-- 创建logo -->
        <h1 class="logo" title="美的">
            <!-- 超链接的href设置/表示自动跳转到主页 -->
            <a href="/">美的商城</a>
        </h1>

        <!-- 创建左侧导航条 -->
        <ul class="nav">
            <li><a href="#">首页</a></li>
            <li><a href="#">企业采购</a></li>
            <li><a href="#">会员福利社</a></li>
            <li><a href="#">美的美居</a></li>
        </ul>

        <!-- 创建右侧导航条 -->
        <ul class="option">
            <li><a href="#"><i class="search"></i></a></li>
            <li class="wx">
                <i class="weixin"></i>
                <!-- 当鼠标移入到li中时，要显示下拉图片 -->
                <div class="hide"></div>
            </li>
            <li><a href="#"><i class="cart"></i></a></li>
            <li>
                <a href="#">
                    <i class="user"></i>
                    <span class="login-text">登录</span>
                </a>
        </li>
        </ul>
    </div>

    <!-- 设置通知栏 -->
    <div class="notice">
        【通知】1.由于系统升级，对部分订单的发货、退换及退款时效会造成部分影响。如您订单出现无法及时处理的情况，请您第一时间联系店铺在线客服，我们将加速为您处理，由此给您带来的不便，我们深表歉意，感谢您对我们一如既往的支持！双11活动中的后返权益（返现/赠品），发放时间将在原承诺时效基础上顺延15个工作日。2.受疫情管控政策影响，云南瑞丽、内蒙阿拉善盟、浙江绍兴、新疆等部分省市区发货/配送有所延迟或暂停派件，更多受影响区域可咨询客服。3.注意防范诈骗，如有疑问请联系官方渠道在线客服咨询。
    </div>

    <!-- 创建服务栏的容器 -->
    <div class="service-wrapper">
        <!-- 创建服务栏的菜单 -->
        <ul class="service w">
            <li>
                <i class="s1"></i>
                美的集团唯一官方商城
            </li>
            <li>
                <i class="s2"></i>
                微信/支付宝快捷支付
            </li>
            <li>
                <i class="s3"></i>
                全国包邮/全国联保
            </li>
            <li>
                <i class="s4"></i>
                7天无理由退换货
            </li>
            <li>
                <a href="#">
                    <i class="s5"></i>
                    企业资质
                </a>
            </li>
        </ul>
    </div>

    <!-- 创建主体内容的区域 -->
    <div class="main w">
        <!-- 
            定义左侧菜单
         -->
        <ul class="menu">
            <li>
                <i class="m1"></i>
                <a href="#">空调</a>
                <a href="#">壁挂式</a>
                <i class="hot"></i>
            </li>
            <li>
                <i class="m2"></i>
                <a href="#">冰箱</a>
                <a href="#">对开门冰箱</a>
                <i class="hot"></i>
            </li>
            <li>
                <i class="m3"></i>
                <a href="#">洗衣机</a>
                <a href="#">滚动洗衣机</a>
                <i class="hot"></i>
            </li>
            <li>
                <i class="m4"></i>
                <a href="#">厨房小电</a>
                <a href="#">电饭煲</a>
            </li>
            <li>
                <i class="m5"></i>
                <a href="#">厨房大电</a>
                <a href="#">烟灶套装</a>
            </li>
            <li>
                <i class="m6"></i>
                <a href="#">生活家电</a>
                <a href="#">取暖器</a>
                <i class="hot"></i>
            </li>
            <li>
                <i class="m7"></i>
                <a href="#">热水器/净水</a>
                <a href="#">热水器</a>
                <i class="hot"></i>
            </li>
            <li>
                <i class="m8"></i>
                <a href="#">家居配件耗材</a>
                <a href="#">清洗服务</a>
            </li>
        </ul> 
    </div>
</body>
</html>